import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React, { useState, useEffect } from 'react'
import { router } from 'expo-router'
import AsyncStorage from '@react-native-async-storage/async-storage';
const information = () => {
    const [list, setList] = useState([
        { title: 1, time: '2022-01-01 12：00', content: '亲爱的张三[2019届互联网+杰出医生Top20推荐成功]' },
        { title: 2, time: '2021-01-01 12：00', content: '亲爱的李四[2019届互联网+杰出医生Top20推荐成功]' },
        { title: 3, time: '2023-01-01 12：00', content: '亲爱的王五[2019届互联网+杰出医生Top20推荐成功]' },
    ])
    interface User1 {
        _id: string,
        users: string,
        names: string,
        password: string,
        phone: string,
        focusOn: Array<string>,
    }
    const [userOne, setUserOne] = useState<User1>()
    useEffect(() => {
        getUser()
    }, [])
    const getUser = async () => {
        getData('user')
    }
    const getData = async (key: string) => {
        try {
            const value: any = await AsyncStorage.getItem(key);
            if (value !== null) {
                setUserOne(JSON.parse(value))
                console.log(value?.names)
            } else {
                console.log('No data found for the key')
            }
            console.log(userOne?.names, 2)
            return value ? JSON.parse(value) : null;
        } catch (error) {
            console.error('Failed to fetch data', error);
        }
    };

    const gotoChat = () => {
        // 跳转到聊天页面
        router.push({
            pathname: '/zhcFile/chat',
            params: {
                _id: userOne ? userOne._id : '',
                mingname: `${userOne?.names}`
            }
        })
    }


    return (
        <View style={styles.information}>
            {
                list.map((item, index) => (
                    <View key={item.title} style={styles.item}>
                        <TouchableOpacity onPress={() => { gotoChat() }}>
                            <View style={styles.itemHeader}>
                                <Text style={{ color: '#333333', fontSize: 12, fontWeight: 'bold' }}>消息通知</Text>
                                <Text style={{ color: '#999999', fontSize: 12 }}>{item.time}</Text>
                            </View>
                            <Text style={styles.itemContent}>{item.content}</Text>
                        </TouchableOpacity>
                    </View>
                ))
            }
        </View>
    )
}

export default information

const styles = StyleSheet.create({
    information: {
        backgroundColor: 'white',
        width: '100%',
        height: '100%',
    },
    item: {
        width: '100%',
        padding: 15,
        height: 80,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        boxSizing: 'border-box',
    },
    itemHeader: {
        // backgroundColor: 'red',
        width: '100%',
        height: 30,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    itemContent: {
        width: '100%',
        textAlign: 'left',
        boxSizing: 'border-box',
        color: '#999999',
        fontSize: 12,
    }
})